<script>
/*
 * @Author: wzh 
 * @Date: 2020-11-20 13:07:46 
 * @Last Modified by: 1521620993@qq.com
 * @Last Modified time: 2020-11-20 13:32:39
 */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01-常规选择器</title>
</head>
<body>
    <style>
      /* 
      常规选择器
          通配符选择器
          元素选择器、伪元素选择器
          类选择器、伪类选择器
          属性选择器
          ID选择器
      */
      *{
        /* 通配符选择器 */
        margin: 0;
      }
      h1{
        /* 元素选择器 */
        font-weight: normal;
      }
      #content{
        /* ID选择器 */
        background-color: wheat;
      }
      .item{
        /* 类选择器 */
        padding: 10px;
      }
      [href]{
        /* 属性选择器 */
        color: red;
      }
      a:hover{
        /* 伪类选择器 */
        color: blue;
        text-decoration: none;
      }
      span::before{
        /* 伪元素选择器 */
        content: '《';
      }
      span::after{
        /* 伪元素选择器 */
        content: '》';
      }
    </style>
    <h1>一级标题</h1>
    <div id="content">
      内容区块
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <a href="#">点击</a>
      <br>
      <span>CSS</span>
    </div>
</body>
</html>